<template>
  <div class="gl-item">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/gonglve' }"
        >旅游攻略</el-breadcrumb-item
      >
      <el-breadcrumb-item class="tcolor">攻略</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="gl-content">
      <div class="conLeft">
        <h1>{{ this.title }}</h1>
        <p>旅游攻略&nbsp;2021-06-20&nbsp;阅读 2021</p>
        <div class="author">
          <div class="authorCon">
            <img
              src="https://n1-q.mafengwo.net/s12/M00/B1/E7/wKgED1xBN92AWvjhAAp9JJct5SU92.jpeg?imageMogr2%2Fthumbnail%2F%21120x120r%2Fgravity%2FCenter%2Fcrop%2F%21120x120%2Fquality%2F90"
              alt=""
              class="authorImg"
            />
            <div class="aCon">
              <p class="authorName">中国自驾地理</p>
              <span class="authorMsg"
                >专注自驾旅行文化，希望“在路上，多远都有朋友！”，欢迎围观公众号：自驾地理。</span
              >
            </div>
          </div>
          <div class="his">
            <i></i>
            <p>Ta的窝</p>
          </div>
        </div>
        <div class="context" v-html="context"></div>
        <img src="https://css.mafengwo.net/images/local/copyright.png" alt="" />
        <el-input
          v-model="input"
          placeholder="请输入内容"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 6 }"
        ></el-input>
        <button class="comment">评论</button>
      </div>
      <div class="conRight">
        <div class="rCon">
          <div class="rTop">
            <div class="tIcon">
              <i></i>
              <p>2</p>
            </div>
            <div class="tIcon">
              <i></i>
              <p>271</p>
            </div>
            <div class="tIcon">
              <i></i>
              <p>194</p>
            </div>
            <div class="tIcon">
              <i></i>
              <p>58</p>
            </div>
          </div>
          <div class="rBottom">
            <p>攻略时间线</p>
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in conRight"
                :key="index"
                >{{ item }}</el-timeline-item
              >
            </el-timeline>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollTo } from "@/utils/scroll-to";
export default {
  data() {
    return {
      context: "",
      conRight: [],
      input: "",
    };
  },
  components: {},
  methods: {},
  created() {
    this.title = JSON.parse(localStorage.getItem("title"));
    this.context = JSON.parse(localStorage.getItem("context"));
    this.conRight = JSON.parse(localStorage.getItem("conRight"));
    scrollTo(0, 800);
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.gl-item {
  width: 1000px;
  // height: 100vh;
  margin: 0 auto;
  .el-breadcrumb {
    margin-top: 15px;
    margin-bottom: 20px;
    /deep/ .el-breadcrumb__inner.is-link:hover {
      text-decoration: underline;
    }
    /deep/ .el-breadcrumb__inner.is-link {
      font-weight: normal;
    }
    /deep/ .el-breadcrumb__inner.is-link:hover {
      color: #ff9d00;
    }
  }
  .gl-content {
    display: flex;
    justify-content: space-between;
    /deep/ .conLeft {
      width: 680px;
      h1 {
        font-size: 30px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e5e5e5;
      }
      .author {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border: 1px solid #eee;
        margin: 20px 0;
        .authorCon {
          width: 570px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          img {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin-left: 15px;
          }
          .aCon {
            width: 440px;
            padding-right: 10px;
            padding-left: 15px;
            .authorName {
              color: #ff9d00;
              padding-bottom: 5px;
            }
            .authorMsg {
              font-size: 14px;
            }
          }
        }
        .his {
          width: 110px;
          display: flex;
          flex-direction: column;
          align-items: center;
          border-left: 1px solid #eee;
          cursor: pointer;
          i {
            content: "";
            background-image: url("https://css.mafengwo.net/images/local/list_sprites4@2x.png");
            width: 32px;
            height: 32px;
            background-size: 210px;
            background-position: 0 -61px;
          }
          p {
            padding-top: 10px;
          }
        }
      }
      & > p {
        padding-top: 10px;
        color: #999;
        font-size: 14px;
        text-align: right;
      }
      .context {
        padding: 30px 0;
        h2,
        h3,
        p {
          padding-bottom: 22px;
        }
        p {
          color: #666;
          font-size: 14px;
        }
        line-height: 26px;
        img {
          max-width: 100%;
          margin-bottom: 10px;
        }
      }
      .el-textarea__inner {
        margin-bottom: 15px;
      }
      .el-textarea__inner:focus {
        border-color: #ff9d00;
      }
      .comment {
        border: 0;
        color: #fff;
        font-size: 16px;
        background-color: #ff9d00;
        padding: 5px 40px;
        margin-bottom: 15px;
        border-radius: 8px;
        float: right;
        cursor: pointer;
      }
    }
    .conRight {
      width: 257px;
      .rCon {
        position: sticky;
        top: 20px;
        .rTop {
          display: flex;
          .tIcon {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            i {
              content: "";
              width: 25px;
              height: 24px;
              background-image: url("http://css.mafengwo.net/images/local/list_sprites01.png?a=1");
              margin-bottom: 8px;
              cursor: pointer;
            }
            &:nth-of-type(2) i {
              background-position: -68px 0;
            }
            &:nth-of-type(3) i {
              background-position: -135px 0;
            }
            &:nth-of-type(4) i {
              background-image: url("http://css.mafengwo.net/images/local/icon_support.png");
              background-size: 100%;
            }
          }
        }
        .rBottom {
          padding-top: 35px;
          p {
            font-size: 18px;
            margin-bottom: 15px;
          }
          .el-timeline {
            width: 240px;
          }
        }
      }
    }
  }
}
</style>